const user = {
  name: 'test, Hello rld'
};
const dom = require('./dom');

const App = () => {
  return <div>{
    user.name} 
    </div>
};

/**
 * Vitural node
 */
class VNode {
  constructor(tag, attributes, children) {
    this.tag = typeof tag === 'function' ? tag() : tag;
    this.attributes = attributes;
    this.children = children;
  }

  render() {
    let el = dom.createElement(this);
    this.children.forEach(child => {
      let c = child instanceof VNode ?
        child.render() :
        document.createTextNode(child);
      el.appendChild(c);
    });
    return el;
  }
}

function createElement(tag, attributes, ...children) {
  return new VNode(tag, attributes, children);
}

function render(element, target) {
  target.appendChild(element.tag.render());
}
render( 
  <App /> ,
  document.getElementById('root')
)